<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">设置选项</div>
        <div class="content">
          <el-form-item  label-width="20px">
            <tabComp v-model="settingData.data.tabData" :tabIndex="settingData.data.tabIndex" @change="tabChangeTabFun"></tabComp>
          </el-form-item >
        </div>
      </div>
      <template v-if="settingData.data.tabData.length">
        <dc-goods-select v-model="listData.goodsList" :multiple="true"></dc-goods-select>
        <div class="card">
          <div class="title">商品样式</div>
          <div class="content">
            <el-form-item label="选择风格">
              <el-radio-group class="custom-radio-button" v-model="listData.mode">
                <el-radio-button :label="1">
                  <sa-icon icon="sa-shop-decorate-goodsCard-mode-1" />
                </el-radio-button>
                <el-radio-button :label="2">
                  <sa-icon icon="sa-shop-decorate-goodsCard-mode-3" />
                </el-radio-button>
                <el-radio-button :label="3">
                  <sa-icon icon="sa-shop-decorate-goodsCard-mode-2" />
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <template v-for="(item, field) in listData.goodsFields" :key="field">
              <template v-if="fieldLabel[field]">
                <el-form-item :label="fieldLabel[field]">
                  <dc-color-picker
                    v-model="item.color"
                    v-model:show="item.show"
                    :isShow="true"
                  ></dc-color-picker>
                </el-form-item>
              </template>
            </template>
          </div>
        </div>
        <div class="card">
          <div class="title">商品角标</div>
          <div class="content">
            <el-form-item label="立即购买按钮">
              <el-radio-group v-model="listData.buyNowStyle.mode">
                <el-radio :label="0">不显示</el-radio>
                <el-radio :label="1">显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="角标选择">
              <el-radio-group v-model="listData.tagStyle.show">
                <el-radio :label="0">不显示</el-radio>
                <el-radio :label="1">显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="listData.tagStyle.show" label="上传图片">
              <div class="sa-flex">
                <sa-uploader v-model="listData.tagStyle.src" fileType="image"></sa-uploader>
                <div class="tip">建议尺寸：36*22</div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="card">
          <div class="title">加购设置</div>
          <div class="content">
            <el-form-item label="加购按钮">
              <el-radio-group v-model="listData.buyNowStyle.mode">
                <el-radio :label="1">文字</el-radio>
                <el-radio :label="2">图片</el-radio>
              </el-radio-group>
            </el-form-item>
  
            <template v-if="listData.buyNowStyle.mode == 1">
              <el-form-item label="文字">
                <el-input v-model="listData.buyNowStyle.text"></el-input>
              </el-form-item>
              <el-form-item label="背景1">
                <dc-color-picker v-model="listData.buyNowStyle.color1"></dc-color-picker>
              </el-form-item>
              <el-form-item label="背景2">
                <dc-color-picker v-model="listData.buyNowStyle.color2"></dc-color-picker>
              </el-form-item>
            </template>
            <el-form-item v-if="listData.buyNowStyle.mode == 2" label="图片">
              <div class="sa-flex"
                ><sa-uploader
                  v-model="listData.buyNowStyle.src"
                  fileType="image"
                ></sa-uploader>
                <div class="tip">建议尺寸：56*56</div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="card">
          <div class="title">样式</div>
          <div class="content">
            <el-form-item label="上圆角">
              <dc-slider v-model="listData.borderRadiusTop"></dc-slider>
            </el-form-item>
            <el-form-item label="下圆角">
              <dc-slider v-model="listData.borderRadiusBottom"></dc-slider>
            </el-form-item>
            <el-form-item label="间距">
              <dc-slider v-model="listData.space"></dc-slider>
            </el-form-item>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script setup>
  import { computed ,inject} from 'vue';
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcGoodsSelect from '../../common/dc-goods-select.vue';
  import dcList from '../../common/dc-list.vue';
  import dcSlider from '../../common/dc-slider.vue';
  import _ from 'lodash'
  import { cloneComponent } from '../../../../data';
  import tabComp from './tabComp.vue'
  const props = defineProps(['settingData', 'tabType']);
  const listData =  computed(()=>props.settingData.data.templateList[props.settingData.data.tabIndex]||{})

  const fieldLabel = computed(() => {
    return {
      title: '商品标题',
      subtitle: '副标题',
      price: '商品价格',
      original_price: '原价',
      sales: '销量',
      stock: '库存',
    };
  });
  const templateData = inject('templateData',{})
  let goodsClassData = _.cloneDeep(cloneComponent('goodsClass',templateData?.basic?.theme || 'orange').data.templateList[0])
  function tabChangeTabFun({type,data}){
      if(type=='addTab'){
        props.settingData.data.templateList.push(_.cloneDeep(goodsClassData))
        props.settingData.data.tabIndex = props.settingData.data.tabData.length - 1
      }else if(type=='selTab'){
        props.settingData.data.tabIndex = data
      }else if(type=='delTab'){
        props.settingData.data.templateList.splice(data,1)
      }
  }
</script>
